<template>
	<view class="start-school">
		<MyHeader :title="title"></MyHeader>
		<scroll-view scroll-y="true">
			<view class="banner-content">
				<!--顶部填写入学信息-->
				<view class="banner-bg">
					<view class="sign-btn" @tap="goEnterSchool">立即填写 > </view>
				</view>
				<view class="school-content">
					<!-- 按钮列表 -->
					<MangList></MangList>
					<!-- 名人堂 -->
					<view class="main-title">名人堂</view>
					<scroll-view scroll-y="true" class="scroll-content">
						<view class="scroll-item">
							<CelebrityList></CelebrityList>
						</view>
					</scroll-view>
					<!-- 公告 -->
					<view class="main-title">公告</view>
					<Notice></Notice>
				</view>
			</view>
		</scroll-view>
		<!-- 弹窗 快速入学 -->
		<view class="pop" v-if="isPop">
			<view class="pop-mask">
				<view class="pop-box">
					<view class="pop-content">
						<image class="close" @tap="closepop" src="../../static/close.png" mode=""></image>
						<image class="pop-btn" src="../../static/pop-btn.png" mode=""></image>
						<view @tap="goEnterSchool" class="btn-text">快速入学</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MyHeader from '@/common/my-header/my-header.vue'
	import MangList from '@/compontent/start-school/MangList.vue'
	import CelebrityList from '@/compontent/start-school/CelebrityList.vue'
	import Notice from '@/compontent/start-school/Notice.vue'
	export default {
		data() {
			return {
				title: '',
				isPop:true
			}
		},
		methods: {
			closepop() {
				this.isPop = false
			},
			// 跳转到入学信息填写页面
			goEnterSchool(){
				uni.navigateTo({
					url:'/pages/enter-school/enter-school'
				})
			}
		},
		onLoad(options) {
			const item = JSON.parse(options.item)
			this.title = item.className
		},
		components: {
			MyHeader,
			MangList,
			CelebrityList,
			Notice
		}
	}
</script>

<style scoped>
	/* 消除滚动条 */
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	scroll-view {
		height: 1500rpx;
		background-color: #f3f4f6;
	}

	.start-school {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-color: #f3f4f6;
	}

	/* 顶部立即填写 */
	.banner-bg {
		position: relative;
		width: 750rpx;
		height: 390rpx;
		background: url('../../static/填写.png')no-repeat;
		background-size: contain;
	}

	.sign-btn {
		position: absolute;
		top: 280rpx;
		left: 60rpx;
		width: 173rpx;
		height: 44rpx;
		font-size: 28rpx;
		color: #ffaa00;
		padding: 5rpx 10rpx;
		text-align: center;
		line-height: 44rpx;
		border: 1rpx solid #ffaa7f;
		border-radius: 40rpx;
	}

	.school-content {
		padding: 40rpx 37rpx;
	}

	.main-title {
		width: 102rpx;
		height: 33rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #252525;
		margin-top: 54rpx;
		margin-bottom: 36rpx;
	}

	.scroll-content {
		width: 100%;
		height: 100%;
	}

	.scroll-item {
		display: inline-block;
	}

	/* 快速入学 */
	.pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.pop-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
	}

	.pop-box {
		width: 500rpx;
		height: 700rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.pop-content {
		width: 500rpx;
		height: 693rpx;
		background: url('../../static/入学.png');
		background-size: contain;
	}

	.close {
		width: 63rpx;
		height: 63rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}

	.pop-btn {
		width: 420rpx;
		height: 80rpx;
		position: absolute;
		left: 45rpx;
		bottom: 126rpx;
	}

	.btn-text {
		width: 136rpx;
		height: 33rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
		position: absolute;
		left: 185rpx;
		bottom: 160rpx;
	}
</style>